<template>
	<div class="character-selector">
		<div class="selector-left">
			<el-icon class="logo-icon" size="28" color="#D4AF37">
				<MagicStick />
			</el-icon>
			<h1 class="app-title">魔法对话</h1>
		</div>
		
		<div class="selector-center">
			<div class="current-character" @click="toggleDropdown">
				<el-icon class="character-icon" size="20" color="#8B4513">
					<UserFilled />
				</el-icon>
				<span class="character-name">{{ currentCharacter || '选择角色' }}</span>
				<el-icon class="dropdown-icon" size="16" color="#8B4513">
					<ArrowDown />
				</el-icon>
			</div>
			
			<div v-if="showDropdown" class="character-dropdown" ref="dropdown">
				<div class="dropdown-header">
					<span>选择魔法角色</span>
				</div>
				<div class="character-grid">
					<div
							v-for="character in characters"
							:key="character.name || character.id"
							:class="['character-card', { 'active': currentCharacter === (character.name || character.id) }]"
							@click="selectCharacter(character.name || character.id)"
					>
						<div class="character-avatar">
							<el-icon size="20" color="#D4AF37">
								<UserFilled />
							</el-icon>
						</div>
						<span class="character-title">{{ character.name || character.title || '未知角色' }}</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="selector-right">
			<el-button
					type="primary"
					size="small"
					@click="$emit('manage-characters')"
					class="manage-btn"
			>
				<el-icon size="14"><Setting /></el-icon>
				角色管理
			</el-button>
			
			<el-button
					type="success"
					size="small"
					@click="$emit('clone-voice')"
					class="manage-btn"
			>
				<el-icon size="14"><Microphone /></el-icon>
				语音克隆
			</el-button>
			
			<el-button
					type="info"
					size="small"
					@click="$emit('manage-knowledge')"
					class="manage-btn"
			>
				<el-icon size="14"><Document /></el-icon>
				知识库
			</el-button>
			
			<el-button
					type="danger"
					size="small"
					@click="$emit('logout')"
					class="logout-btn"
			>
				<el-icon size="14"><SwitchButton /></el-icon>
				退出
			</el-button>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import {
	MagicStick,
	UserFilled,
	ArrowDown,
	Setting,
	Document,
	SwitchButton,
	Microphone // 新增：导入图标
} from '@element-plus/icons-vue'

const props = defineProps({
	characters: {
		type: Array,
		default: () => []
	},
	currentCharacter: {
		type: String,
		default: ''
	}
})

// 新增：在emits中声明 clone-voice 事件
const emit = defineEmits([
	'select-character',
	'manage-characters',
	'clone-voice',
	'manage-knowledge',
	'logout'
])

const showDropdown = ref(false)
const dropdown = ref(null)

// 切换下拉菜单
function toggleDropdown(event) {
	event.stopPropagation()
	showDropdown.value = !showDropdown.value
}

// 选择角色
function selectCharacter(characterName) {
	emit('select-character', characterName)
	showDropdown.value = false
}

// 点击外部关闭下拉菜单
function handleClickOutside(event) {
	if (dropdown.value && !dropdown.value.contains(event.target)) {
		showDropdown.value = false
	}
}

onMounted(() => {
	document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
	document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.character-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	/* 使用简单的背景色 */
	background: #8B4513;
	/* 使用简单的分隔线 */
	border-bottom: 1px solid #ddd;
	position: relative;
	z-index: 1000;
}

.selector-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.logo-icon {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.app-title {
	color: white;
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.selector-center {
	position: relative;
	flex: 1;
	max-width: 400px;
	margin: 0 32px;
}

.current-character {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.current-character:hover {
	background: rgba(255, 255, 255, 1);
	border-color: #D4AF37;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.character-name {
	flex: 1;
	font-weight: 600;
	color: #8B4513;
	text-align: center;
}

.character-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	border: 2px solid #D4AF37;
	overflow: hidden;
	z-index: 1001;
}

.dropdown-header {
	padding: 12px 16px;
	background: linear-gradient(135deg, #F5F5DC, #FFF8DC);
	border-bottom: 1px solid #D4AF37;
	font-weight: 600;
	color: #8B4513;
	text-align: center;
}

.character-grid {
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	max-height: 300px;
	overflow-y: auto;
}

.character-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	background: #FAFAFA;
}

.character-card:hover {
	background: #F0F8FF;
	border-color: #D4AF37;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.character-card.active {
	background: linear-gradient(135deg, #D4AF37, #FFD700);
	color: white;
	border-color: #B8860B;
}

.character-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #F5F5DC, #FFF8DC);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #D4AF37;
}

.character-card.active .character-avatar {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

.character-title {
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
}

.selector-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.manage-btn, .logout-btn {
	border-radius: 20px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.manage-btn:hover, .logout-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 滚动条样式 */
.character-grid::-webkit-scrollbar {
	width: 6px;
}

.character-grid::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.character-grid::-webkit-scrollbar-thumb {
	background: #D4AF37;
	border-radius: 3px;
}

.character-grid::-webkit-scrollbar-thumb:hover {
	background: #B8860B;
}
</style>